<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.b1{
				width: 300px;
				height: 300px;
				background-color: aqua;
			}
			.b2
			{
				width: 500px;
				height: 500px;
				background-color: aquamarine;   /* 如果是b1b2会是这个颜色，因为在下面*/
			}
		</style>
		<script type="text/javascript">
			window.onload=function()
			{
				var btn01=document.getElementById("btn01");
				var btn02=document.getElementById("btn02");
				var btn03=document.getElementById("btn03");
				var box1=document.getElementById("box1");
				function hasClass(obj,cn)            //判断是否有cn这个class属性
 				{
					var reg=new RegExp("\\b"+cn+"\\b");   //cn是什么reg就是什么
					return reg.test(obj.className);    //判断className里面是否有reg也就是是否有cn
				}
				function addClass(obj,cn)
				{
					if(!hasClass(obj,cn))
					{
						obj.className+=" "+cn;
					}
				}
				function removeClass(obj,cn)   //直接删除就好了，而不用判断是否有，有也删，无也删除
				{
					var reg=new RegExp("\\b"+cn+"\\b");    //前面为空 后面也为空
					obj.className=obj.className.replace(reg,"");
				}
				function toggleClass(obj,cn)
				{
					if(hasClass(obj,cn))
					{
						removeClass(obj,cn)
					}
					else
					{
						addClass(obj,cn);
					}
				}
				btn01.onclick=function()
				{
					addClass(box1,"b2");
				}
				btn02.onclick=function()
				{
					removeClass(box1,"b2");
				}
				btn03.onclick=function()
				{
					toggleClass(box1,"b2");
				}
			}
		</script>
	</head>
	<body>
		<button id="btn01">增加类</button>
		<button id="btn02">删除类</button>
		<button id="btn03">yesoeno</button>
		<br><br><br>
		<div id="box1" class="b1 b2"></div>
	</body>
</html>